<template>
  <div class="secondHand">
    <!-- <header>

      <head></head>
      <div class="top">
        <div>
          <navigator
            open-type='switchTab'
            url='/pages/index/index'
          >〈 </navigator>
        </div>
        <div>二手房</div>
      </div>
    </header> -->

    <main>
      <div
        class="second"
        v-for="(item,index) in secondHandData"
        :key="index"
        @click="goInfo(item.id,item)"
      >
        <div class="left">
          <img
            :src="item.img"
            alt=""
          />
        </div>
        <div class="right">
          <p class="right_1">{{item.title}}</p>
          <p class="right_2">{{item.city}} <span>{{item.price}}</span></p>
          <p class="right_3">{{item.room}}室{{item.living_room}}厅{{item.acreage}}{{item.renovation}}</p>
          <p class="right_4"><span
              v-for="(items,indexs) in item.tags"
              :key="indexs"
            >{{items}}</span></p>
        </div>
      </div>
      <div class='loading'>
        <p v-show="!flag">数据加载完毕...</p>
        <p v-show="flag">加载中...</p>
      </div>
    </main>
  </div>
</template>

<script>
import { getSecondHandList } from "../../service/index";
import { setTimeout } from "timers";

export default {
  data() {
    return {
      secondHandData: [],
      page: 0,
      size: 5,
      // total:0
      flag: false,
      name: "second"
    };
  },

  // 获取数据
  async onShow() {
    let data = { page: this.page, size: this.size };
    let result = await getSecondHandList(data, this.name);
    // this.total = result.total_page
    console.log(result);

    if (result.code === 200) {
      this.secondHandData = result.data;
    }
  },

  methods: {
    goInfo(id, item) {
      wx.navigateTo({
        url: `/pages/infoRoom/index?id=${id}`
      });
    }
  },

  // 下拉刷新
  onPullDownRefresh() {
    // wx.showNavigationBarLoading();
    setTimeout(() => {
      this.getData = "数据拿到了";
      // wx.stopPullDownRefresh();
      // wx.hideNavigationBarLoading();
    }, 3000);
  },

  // 上拉加载
  onReachBottom() {
    this.flag = true;
    let data = { page: this.page, size: this.size };
    let result = getSecondHandList(data, this.name);
    // this.total = result.total_page
    console.log(result);

    if (result.code === 200) {
      this.secondHandData = result.data;
    }

    setTimeout(() => {
      this.flag = false;
    }, 2000);
  }
};
</script>

<style lang='scss'>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;
}

.secondHand {
  width: 100%;
  height: 100%;

  header {
    width: 100%;
    height: 180rpx;
    color: #ffffff;
    background: #1281f5;
    position: sticky;
    top: 0;
    z-index: 1;

    head {
      width: 100%;
      height: 60rpx;
    }

    .top {
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      display: flex;

      div {
        &:nth-child(1) {
          width: 100rpx;
          height: 100%;
          text-align: center;
          margin-left: 40rpx;
        }
        &:nth-child(2) {
          width: 300rpx;
          height: 100%;
          margin-left: 139rpx;
        }
      }
    }
  }

  main {
    width: 100%;
    height: 100%;

    .second {
      width: 100%;
      height: 200rpx;
      font-size: 30rpx;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid rgb(228, 228, 228);
      display: flex;
      justify-content: space-around;

      .left {
        width: 26%;
        height: 80%;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        width: 65%;
        height: 100%;
        display: flex;
        flex-direction: column;

        p {
          flex: 1;
        }

        .right_2 {
          position: relative;
          color: #bebebe;
          font-size: 24rpx;

          span {
            position: absolute;
            right: 0;
            color: #0bb00b;

            font-weight: bold;
          }
        }

        .right_3 {
          color: #bebebe;
          font-size: 24rpx;
        }

        .right_4 {
          span {
            font-size: 22rpx;
            padding: 5rpx;
            margin-left: 10rpx;

            &:nth-child(1) {
              color: #c07989;
              background: #ffebef;
            }
            &:nth-child(2) {
              color: #707db4;
              background: #e8eaf6;
            }
            &:nth-child(3) {
              color: #67a6ad;
              background: #e0f7fa;
            }
            &:nth-child(4) {
              color: #78c478;
              background: #d6f5d6;
            }
          }
        }
      }
    }

    .loading {
      width: 100%;
      height: 80rpx;
      font-size: 30rpx;
      text-align: center;
      line-height: 80rpx;

      .active {
        display: none;
      }
    }
  }
}
</style>
